<template>
	<div class="orgWebsiteEdit">
		<v-title title='编辑网点' text1='创建人: ' :value1='website.founder' text2='创建时间: ' :value2='website.creatTime' isShow='true'></v-title>
		<div class="main">
			<el-form ref="form" :model="form" :rules="rules" label-width="120px">
				<el-form-item label="网点名称:" prop="latticeName">
					<el-input v-model="form.latticeName" placeholder="请输入网点名称"></el-input>
				</el-form-item>
				<el-form-item label="区域选择:" required>
					<el-col>
					  <el-form-item prop="valueProvince">
						<el-select class="areaSelect" v-model="form.valueProvince" placeholder="请选择省" @change="changeProvince($event)" > 
							<el-option v-for="item in provinceList" :key="item.value" :label="item.label" :value="item.value"> </el-option> 
						</el-select>
					  </el-form-item>
					</el-col>
					<el-col >
						<el-form-item prop="valueCity">
							<el-select class="areaSelect" v-model="form.valueCity" placeholder="请选择市" @change="changeCity" >
								<el-option v-for="item in cityOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col >
						<el-form-item prop="valueOrigin">
							<el-select class="areaSelect" v-model="form.valueOrigin" placeholder="请选择区" @change="changeOrigin" >
								<el-option v-for="item in originOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					
				</el-form-item>

				<el-form-item label="详细地址:" prop="address">
					<el-input v-model="form.address" placeholder="请输入详细地址"></el-input>
				</el-form-item>
				<el-form-item label="管理员:" prop="person">
					<el-select
						class="adminSelect"
						v-model="form.person"
						clearable
						placeholder="请选择网点管理员">
						<el-option v-for="item in personArr" 
						:key="item.id" 
						:label="item.name" 
						:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="网点联系方式:" prop="contact">
					<el-input v-model="form.contact" placeholder="请输入网点联系方式,如有多个请以英文逗号隔开"></el-input>
				</el-form-item>
				<el-form-item label="备注:" prop="remarks">
					<el-input rows="4" type="textarea" v-model="form.remarks" placeholder="请输入网点联系方式,如有多个请以英文逗号隔开"></el-input>
				</el-form-item>
				<el-form-item style="display: flex;justify-content: flex-start;">
					<el-button style="margin-left: 0;" class="btn" type="primary" @click="addWebsite('form')">提交</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script>
import vTitle from './view/titleDiv.vue'
import addressJson from '../assets/json/china_address_v4.js'
import {orgWebsiteEditBefore,orgWebsiteEditEnter,orgPerson} from '../api/getData.js'
export default {
	name: 'orgWebsiteEdit',
	components: {
		vTitle
	},
	data: function() {
		return {
			value1: '',
			value2: '',
			addressJson:addressJson,
			provinceList: [], // 省列表 
			cityList: [], // 市列表 
			originList: [], // 区列表 
			cityOptions: [], // 市下拉框数据 
			originOptions: [], // 区下拉框数
			personArr:[],//管理员选择
			form: {
				latticeName: '',
				address: '',
				person: '',
				contact:'',
				remarks:'',
				valueProvince: '', // 所选的省 
				valueCity: '', // 所选的市 
				valueOrigin: '', // 所选的区 
			},
			rules: {
				latticeName:[{required: true, message: '请输网点名称', trigger: 'blur'}],
				valueProvince:[{required: true, message: '请选择省', trigger: 'change'}],
				valueCity:[{required: true, message: '请选择市', trigger: 'change'}],
				valueOrigin:[{required: true, message: '请选择县区', trigger: 'change'}],
				address:[{required: true, message: '请输网点详细地址', trigger: 'blur'}],
				person:[{required: true, message: '请选择管理员', trigger: ['blur','change']}],
				contact:[{required: true, message: '请输入网点联系方式,如有多个请以英文逗号隔开', trigger: 'blur'}]
			},
			website:{},
			latticeid:'',
			oldpersonid:''
		}
	},
	created: function() {
		this.getParams()
		this.changePerson()
		this.editBefore()
	}, // 创建时
	beforeMount: function() {}, // 挂载之前
	mounted() {
		this.getJsonData()
	}, // 挂载之后
	beforeUpdate: function() {}, // 数据更新时调用,在渲染之前
	updated: function() {}, // 数据更新后,渲染后调用(禁止)
	beforeDestroy: function() {}, // 实例销毁前调用,解绑中间层的数据传输
	destroyed: function() {}, // 实例销毁后调用
	methods: {
		// 获取列表页传来的参数
		getParams(){
			var routerParams = this.$route.query.id // 将数据放在当前组件的数据内
			console.log("传来的参数==" + routerParams) 
			this.latticeid = routerParams 
		},
		// 编辑之前
		editBefore(){
			orgWebsiteEditBefore({latticeid:this.latticeid}).then((res) =>{
				console.log(res.data,"编辑之前")
				if(res.data.code === 0){
					this.website = res.data.data
					this.form.latticeName = res.data.data.name
					this.form.contact = res.data.data.latticePointTel
					this.form.person = res.data.data.person
					this.form.valueProvince =  res.data.data.province; // 省
					this.form.valueCity = res.data.data.city; // 市
					this.form.valueOrigin = res.data.data.county //区
					this.form.address = res.data.data.village
					this.form.remarks = res.data.data.remarks
					this.oldpersonid = res.data.data.person
				}else{
					this.$message({
					  message: res.data.msg,
					  type: 'warning'
					});
				}
			}).catch((error) =>{
				console.log(error)
			})
		},
		// 加载china地点数据，三级
		getJsonData() { 
				// console.log(this.addressJson,'加载的地址数据')
				this.provinceList = [] 
				this.cityList = [] 
				this.originList = []
				this.addressJson.forEach((item) => { 
					if (item.value.match(/0000$/)) { 
						this.provinceList.push({ 
							value: item.value, 
							label: item.name, 
							children: [] ,
						}) 
					} else if (item.value.match(/00$/)) { 
						this.cityList.push({ 
							value: item.value, 
							label: item.name, 
							children: [] ,
						}) 
					} else { 
						this.originList.push({ 
							value: item.value, 
							label: item.name ,
						}) 
					} 
				}) 
				// console.log(this.provinceList,this.cityList,this.originList)
				if(this.provinceList){
					for (let index in this.provinceList) { 
						if(this.cityList){
							for (let index1 in this.cityList) { 
								if (this.provinceList[index].value.slice(0, 2) === this.cityList[index1].value.slice(0, 2)) { 
									this.provinceList[index].children.push(this.cityList[index1]) 
								} 
							} 
						}
					} 
				}
				if(this.cityList){
					for(let item1 in this.cityList) { 
						if(this.originList){
							for(let item2 in this.originList) { 
								if (this.originList[item2].value.slice(0, 4) === this.cityList[item1].value.slice(0, 4)) { 
									this.cityList[item1].children.push(this.originList[item2]) 
								} 
							} 
						}
					} 
				}
		},

		// 选择省
		changeProvince(val) { 
			// console.log(val,'---省---')
			this.provinceList.forEach((province, index) => { 
				if (val.toString() === this.provinceList[index].value) { 
					this.cityOptions = this.provinceList[index].children 
					this.form.valueCity = this.provinceList[index].children[0].name 
					this.originOptions = this.provinceList[index].children[0].children 
					this.form.valueOrigin = this.provinceList[index].children[0].children[0].name 
				} 
			}) 
			let obj = {};
			obj = this.provinceList.find((item)=>{//this.ruleForm
				return item.value === val;//筛选出匹配数据
			});
			console.log(obj.label,"选中的省份");
			this.form.valueProvince = obj.label
		},
		// 选市
		changeCity(val) { 
			this.cityList.forEach((city, index) => { 
				if (val.toString() === this.cityList[index].value) { 
					this.originOptions = this.cityList[index].children 
					this.form.valueOrigin = this.cityList[index].children[0].name 
				} 
			})
			let obj = {};
			obj = this.cityList.find((item)=>{
				return item.value === val;
			});
			console.log(obj.label,"选中的市");
			this.form.valueCity = obj.label
		},

		// 选区
		changeOrigin(val) {
			let obj = {};
			obj = this.originOptions.find((item)=>{
				return item.value === val;
			});
			console.log(obj.label,"选中的县区");
			this.form.valueOrigin = obj.label
		},
		// 管理员选择
		changePerson(){
			orgPerson({}).then((res)=>{
				console.log(res.data,"机构管理员")
				if(res.data.code === 0){
					this.personArr = res.data.data
				}else{
					this.personArr =[]
				}
			}).catch((error) =>{
				console.log(error)
			})
		},
		// 提交
		addWebsite(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					console.log(this.form)
					orgWebsiteEditEnter({
						latticeid:this.latticeid,
						latticeName: this.form.latticeName,
						address: this.form.valueProvince + this.form.valueCity + this.form.valueOrigin + this.form.address,
						personid: this.form.person,
						latticepointtel:this.form.contact,
						remarks:this.form.remarks,
						oldpersonid:this.oldpersonid
					}).then((res) => {
						console.log(res.data, "添加网点")
						if (res.data.code == 0) {
							this.$message({
								message: res.data.msg,
								type: 'success'
							});
							setTimeout(() => {
								this.$router.push('/orgWebsite/orgWebsiteIndex')
							}, 1000)
						} else {
							this.$message({
								message: res.data.msg,
								type: 'error'
							});
						}
					}).catch((error) => {
						console.log(error)
					})
				} else {
					console.log('error submit!!');
					return false;
				}
			});

		}
	} // 函数
}
</script>
<style lang='scss'>
	.orgWebsiteEdit {
		box-sizing: border-box;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 64px;
			line-height: 64px;
			background: #fff;
			overflow: hidden;
			text-align: left;
			padding: 0 20px;
			color: #333437;
			font-size: 16px;
		}

		.main {
			background: #fff;
			width: 100%;
			margin-top: 2%;
			padding: 3% 20% 5%;

			.el-form-item__label {
				font-weight: bold;
			}
			.el-form-item__content{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.areaSelect{
				width: 99%;
			}
			.adminSelect{
				width: 100%;
			}
			.btn {
				width: 120px;
				height: 32px;
				padding: 0;
				line-height: 32px;
			}
		}
	}
</style>
